<script setup>
import { nextTick, ref } from 'vue'
import ListCardComponent from '@/components/ListCardComponent/ListCardComponent.vue'
import WaterFallComponent from '@/components/WaterFallComponent/WaterFallComponent.vue'

// 列表距离顶部的位置
const scrollTop = ref(0)

// 记录滚动视图的scrollTop值
const oldScrollTop = ref(0)

// 接收传递过来的列表数据
const props = defineProps({
	list: {
		type: Array,
		required: true
	},
	type_key: {
		type: String,
		required: true
	},
	status: {
		type: String,
		default: 'loadmore'
	}
})

// 调用父组件中的方法
const emits = defineEmits(['reachBottom'])

// 当滚动列表滚动到底部时触发函数
const onScrollToLower = () => {
	emits('reachBottom')
}

// 记录当前scroll的位置
const scroll = (e) => {
	oldScrollTop.value = e.detail.scrollTop
}

// 回到顶部位置
const goToTop = () => {
	scrollTop.value = oldScrollTop.value
	nextTick(() => {
		scrollTop.value = 0
	})
}

// 暴露方法供父组件调用
defineExpose({
	goToTop
})
</script>

<template>
	<scroll-view scroll-y="true" class="list" @scrolltolower="onScrollToLower" :scroll-top="scrollTop" @scroll="scroll">
		<!-- 返回顶部 -->
		<up-back-top
			:scroll-top="oldScrollTop"
			top="600"
			@tap="goToTop"
			icon="arrow-up"
			:iconStyle="{ color: '#1ec585' }"
			customStyle="backgroundColor:#fff;border:4rpx solid #f5f5f5;width:90rpx;height:90rpx;box-shadow: 5px 5px 5px rgba(0,0,0,0.3);"
		></up-back-top>

		<template v-if="type_key !== 'post'">
			<ListCardComponent :list="props.list" :type_key="type_key"></ListCardComponent>
		</template>

		<template v-else>
			<WaterFallComponent :list="props.list" :type_key="type_key"></WaterFallComponent>
		</template>

		<view style="padding: 20rpx 0" v-if="type_key !== 'post'">
			<up-loadmore :status="status" />
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
.list {
	height: 100vh;
}
</style>
